<template>
  <div class="content">
    <div class="topBox" ref="topBox">
      预设管理
    </div>
    <div class="tableBox">
      <div style="position: relative">
        <t-table
            :height="tableHeight"
            ref="tableRef"
            row-key="index"
            :data="tableState.tableData"
            :columns="tableState.columns"
        >
          <template #handle="{ row }">
            <t-button theme="primary" @click="openDelDialog(row)" v-permission="['preset:delete']">
              <template #icon>
                <svg-icon
                    :name="'icon-rowDel'"
                    class-name="rowDel-svg-icon"
                ></svg-icon>
              </template>
              删除
            </t-button>
          </template>
        </t-table>
        <div class="emptyBox" v-if="tableState.tableData.length === 0">
          <svg-icon
              :name="'icon-emptyTable'"
              class-name="emptyTable-svg-icon"
          ></svg-icon>
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <div class="footerBox">
      <t-pagination
          v-model="current"
          v-model:pageSize="pageSize"
          :pageSizeOptions="[10, 20, 30, 50]"
          :total="totalNum"
          size="small"
          show-jumper
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
      />
    </div>
    <t-dialog
        v-model:visible="delVisible"
        theme="info"
        width="431"
        header="是否删除预设"
        body=""
        :on-confirm="onClickConfirm"
    />
  </div>
</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import {debounce} from "../../utils/tools";
const pageInstance = getCurrentInstance()
import cache from '@/utils/cache.js'
import {delPreset, presetList} from "../../api/qualityTask";
const tableState = reactive({
  tableData: [],
  columns: [
    { colKey: '',title: '序号', cell:(h, { rowIndex }) => {
        {{
          return rowIndex + (current.value - 1) * pageSize.value + 1 >= 10
              ? rowIndex + (current.value - 1) * pageSize.value + 1
              : "0" + (rowIndex + (current.value - 1) * pageSize.value + 1)
        }}
      }
    },
    { colKey: 'presetName', title: '名称' },
    { colKey: 'handle', title: '操作', align: 'center', },
  ],
})

// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    const otherHeight = pageInstance.refs.topBox.offsetHeight
    const windowHeight = window.innerHeight
    tableHeight.value = windowHeight - otherHeight - 160
    console.log(tableHeight.value)
  })
}

// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  console.log(info)
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)
onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
  handleQuery()
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})

// 删除
const delVisible = ref(false)
const delId = ref(null)
const openDelDialog = (row) => {
  delId.value = row.id
  delVisible.value = true
}
const onClickConfirm = (context) => {
  delPreset(delId.value).then(res => {
    if(res.code === 0) {
      MessagePlugin.success('删除成功')
      handleQuery()
    }
  })
  delVisible.value = false;
};

// 分页
const current = ref(1);
const pageSize = ref(10);
const totalNum = ref(0)
const onPageSizeChange = (size) => {
  pageSize.value = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  current.value = index
  handleQuery()
};

const handleQuery = () => {
  let data = {
    pageNo: current.value,
    pageSize: pageSize.value,
    projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  }
  presetList(data).then(res => {
    if(res.code === 0) {
      tableState.tableData = res.data.list
      current.value = res.data['currPage']
      pageSize.value = res.data['pageSize']
      totalNum.value = res.data['totalCount']
    }
  })
}
</script>

<style lang="scss" scoped>
.content{
  position: relative;
  overflow: hidden;
  padding: 8px;
  background-color: #EBECED!important;
}
.topBox {
  padding: 0 16px;
  height: 67px;
  line-height: 67px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  text-align: left;
  background-color: rgba(255,255,255,1);
  border-radius: 4px 4px 0 0;
}
.tableBox {
  :deep(.t-table__header) {
    tr {
      th {
        padding: 7px 10px;
        box-sizing: border-box;
      }
      th:nth-child(1) {
        padding-left: 90px;
      }
      th:nth-child(2) {
        padding-left: 90px;
      }
    }
  }
  :deep(.t-table__body) {
    tr {
      td {
        padding: 6px 10px;
        box-sizing: border-box;
      }
      td:nth-child(1) {
        padding-left: 90px;
      }
      td:nth-child(2) {
        padding-left: 90px;
      }
    }
    .t-button {
      border: none;
      width: 56px;
      height: 26px;
      opacity: 1;
      background: rgba(255, 224, 224, 1);
      border-radius: 3px;
      font-size: 13px;
      font-weight: 400;
      padding: 0;
      color: rgba(227, 77, 89, 1);
      .rowDel-svg-icon {
        height: 12px;
        width: 12px;
        margin-right: 2px;
      }
    }
  }
}
:deep(.t-table__empty) {
  display: none;
}
.emptyBox {
  position: absolute;
  height: 116px;
  width: 69px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .emptyTable-svg-icon {
    height: 62px;
    width: 69px;
  }
  span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(92, 91, 91, 1);
  }
}
:deep(.t-dialog) {
  padding: 22px 22px 18px 22px;
  .t-icon.t-is-info {
    color: rgba(30, 117, 254, 1) ;
  }
  .t-dialog__body__icon {
    display: none;
  }
  .t-dialog__footer {
    padding-top: 31px;
    .t-dialog__cancel {
      background-color: white;
      border: none;
      width: 60px;
      height: 28px;
    }
    .t-dialog__confirm {
      width: 60px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(30, 117, 254, 1);
    }
    .t-dialog__confirm:hover {
      background: var(--Brand-Brand6-Hover, #458DFF) !important;
      color: var(--text-icon-font-wh-190-anti, rgba(255, 255, 255, 0.90)) !important;
    }
  }
}
.footerBox {
  background-color: rgba(255,255,255,1);
  width: calc(100% - 16px);
  position: absolute;
  bottom: 8px;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
}
</style>

